<template>
  <div class="app-container">
    <div class="module-box" v-if="validateForm">
      <div class="module-item">
        <div class="module-item-title">
          <span class="tit">基本信息</span>
        </div>
        <div class="form module-item-content" style="padding-top:35px;overflow: hidden;">
          <el-form label-position="right" label-width="230px">
            <el-col :span="12">
              <el-form-item label="集体名称：">
                <el-input readonly :value="validateForm.collectiveLandApply.applicantName ? validateForm.collectiveLandApply.applicantName : ''" />
              </el-form-item>
              <el-form-item label="代表人：">
                <el-input readonly :value="validateForm.collectiveLandApply.representName" />
              </el-form-item>
              <el-form-item label="联系人：">
                <el-input readonly :value="validateForm.collectiveLandApply.contactName" />
              </el-form-item>
              <el-form-item label="手机号码：">
                <el-input readonly :value="validateForm.collectiveLandApply.mobilePhone" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组织机构代码：">
                <el-input readonly :value="validateForm.collectiveLandApply.applicantNum" />
              </el-form-item>
              <el-form-item label="代表人身份证：">
                <el-input readonly :value="validateForm.collectiveLandApply.representNum" />
              </el-form-item>
              <el-form-item label="座机号码：">
                <el-input readonly :value="validateForm.collectiveLandApply.fixedPhone" />
              </el-form-item>
              <el-form-item label="通讯地址：">
                <el-input readonly :value="validateForm.collectiveLandApply.address" />
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>

      <div class="module-item">
        <div class="module-item-title">
          <span class="tit">账户信息</span>
        </div>
        <div class="form module-item-content" style="padding-top:35px;overflow: hidden;">
          <el-form label-position="right" label-width="230px">
            <el-col :span="12">
              <el-form-item label="户名：">
                <el-input readonly :value="validateForm.collectiveLandApply.accountName" />
              </el-form-item>
              <el-form-item label="账号：">
                <el-input readonly :value="validateForm.collectiveLandApply.accountNum" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户行：">
                <el-input readonly :value="validateForm.collectiveLandApply.accountBank" />
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>

      <div class="module-item">
        <div class="module-item-title">
          <span class="tit">权证信息</span>
        </div>
        <div class="form module-item-content" style="padding-top:35px;overflow: hidden;">
          <el-form label-position="right" label-width="230px">
            <el-col :span="12">
              <el-form-item label="证件类型：">
                <el-input readonly :value="validateForm.collectiveLandApply.certificateType ? validateForm.collectiveLandApply.certificateType.name : ''" />
              </el-form-item>
              <el-form-item label="发证时间：">
                <el-input readonly :value="validateForm.collectiveLandApply.issueCertificateDate" />
              </el-form-item>
              <el-form-item label="代表人：">
                <el-input readonly :value="validateForm.collectiveLandApply.obligeeName" />
              </el-form-item>
              <el-form-item label="是否愿意预留农村发展指标：">
                <el-input readonly :value="validateForm.collectiveLandApply.isRemain" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号码：">
                <el-input readonly :value="validateForm.collectiveLandApply.certificateNum" />
              </el-form-item>
              <el-form-item label="土地使用权面积：">
                <el-input readonly :value="validateForm.collectiveLandApply.landArea" >
                  <span slot="suffix">㎡</span>
                </el-input>
              </el-form-item>
              <el-form-item label="土地坐落：">
                <el-input readonly :value="validateForm.collectiveLandApply.landAddress" />
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>

      <div class="module-item">
        <div class="module-item-title">
          <span class="tit">附件信息</span>
        </div>
        <div class="module-item-content" style="padding-top:35px;overflow: hidden;">
          <el-table :data="fileList" highlight-current-row>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="type" label="类型"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="handleImageDialog(scope.row.url)">查看</el-button>
                <el-button type="text" @click="handleDownload(scope.row.url)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>

    </div>
  </div>
</template>

<script>
import { queryApplyDetailById } from "@/api/project/fksqtc/groupApplyCheck";
import config from "@/config";

export default {
  data() {
    return {
      validateForm: null,
      param: null, // 路由参数
      fileList: [{ type: "集体经济组织民主决策程序审查同意证明材料" }, { type: "代表人身份证正面" }, { type: "代表人身份证反面" }, { type: "权证证明" }],
      dialogVisible: false,
      dialogImageUrl: ""
    };
  },
  watch: {},
  created() {
    this.param = this.$route.query;
    this.handleDetail();
  },
  methods: {
    handleDetail() {
      queryApplyDetailById({
        landId: this.param.id
      }).then(res => {
        this.validateForm = res.data;
        this.validateForm.collectiveLandApply.isRemain = this.validateForm.collectiveLandApply.isRemain=="YES"?'是':'否'
        if (res.data != null) {
          console.log(this.validateForm,"validateForm")
          this.fileList.forEach((item, index) => {
            item.url = config.baseUrlImg + this.validateForm.collectiveLandApply[`attachment${index + 1}Url`];
          });
        }
      });
    },
    handleImageDialog(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    handleDownload(url) {
      window.open(url);
    }
  }
};
</script>

<style lang="scss" scoped>
.module-item {
  width: 100%;
  background-color: #fff;
}

.module-item-title {
  width: 100%;
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  font-size: 18px;
  color: #333;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}

.module-item-content {
  width: 100%;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}

.form {
  /deep/ .el-input {
    width: 200px;
  }
}

.submit-box {
  text-align: left;
  margin-top: 20px;
}
</style>
 